<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      .preview_img {
        position: relative;
        width: 800px;
        height: 300px;
        border: 1px solid #ccc;
        margin: 50px auto;
      }

      .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 240px;
        height: 90px;
        background: #fede4f;
        opacity: 0.5;
        border: 1px solid #ccc;
        cursor: move;
      }

      .big {
        display: none;
        position: absolute;
        left: 810px;
        top: 0;
        width: 480px;
        height: 180px;
        background-color: red;
        z-index: 999;
        border: 1px solid #ccc;
        overflow: hidden;
      }

      .big img {
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="preview_img">
      <img src="../../images/473973.png" alt="" />
      <div class="mask"></div>
      <div class="big">
        <img src="../../images/473973-big.png" alt="" class="bigImg" />
      </div>
    </div>
    <script>
      //页面元素加载完毕触发事件
      window.addEventListener("load", function () {
        //获取元素
        var preview_img = document.querySelector(".preview_img");
        var mask = document.querySelector(".mask");
        var big = document.querySelector(".big");
        var bigImg = document.querySelector(".bigImg");
        // 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
        preview_img.addEventListener("mouseover", function () {
          mask.style.display = "block";
          big.style.display = "block";
        });
        preview_img.addEventListener("mouseout", function () {
          mask.style.display = "none";
          big.style.display = "none";
        });

        //鼠标移动的时候，让遮挡层跟着鼠标走
        preview_img.addEventListener("mousemove", function (e) {
          // 计算鼠标在盒子内的坐标
          var x = e.pageX - this.offsetLeft;
          var y = e.pageY - this.offsetTop;
          // mask移动的距离为鼠标在盒子内的坐标减去盒子高度的一半,保证鼠标在盒子的正中央
          var maskX = x - mask.offsetWidth / 2;
          var maskY = y - mask.offsetHeight / 2;
          //限制mask的移动，防止超出preview_img的最右侧或最下方
          //mask可移动的最大距离就是preview_img的宽高减去其自身的宽高
          var maskMaxX = preview_img.offsetWidth - mask.offsetWidth;
          var maskMaxY = preview_img.offsetHeight - mask.offsetHeight;
          //当mask移动距离小于0，意味着其超出preview_img的最左侧或最上方,将其移动距离设为0防止超出
          if (maskX <= 0) {
            maskX = 0;
          } else if (maskX >= maskMaxX) {
            maskX = maskMaxX;
          }
          if (maskY <= 0) {
            maskY = 0;
          } else if (maskY >= maskMaxY) {
            maskY = maskMaxY;
          }
          //将得到的mask应移动距离赋值给mask
          mask.style.left = maskX + "px";
          mask.style.top = maskY + "px";
          // 为避免容器中出现背景颜色，大图片最大移动距离为其宽高减去其容器的宽高
          var bigMaxX = bigImg.offsetWidth - big.offsetWidth;
          var bigMaxY = bigImg.offsetHeight - big.offsetHeight;
          // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
          var bigX = (maskX * bigMaxX) / maskMaxX;
          var bigY = (maskY * bigMaxY) / maskMaxY;
          //将得到的大图片应移动距离赋值给大图片
          bigImg.style.left = -bigX + "px";
          bigImg.style.top = -bigY + "px";
        });
      });
    </script>
  </body>
</html>
